<template>
  <div class="details_page">
    <navigate>团体活动</navigate>
    <div class="details_cont">
      <!-- 讲座信息 -->
      <div class="training_info white_box">
        <div class="theme_txt">
          培训讲座主题:{{ info.name }}
        </div>
        <img :src="info.cover" alt="" class="theme_img" />

        <!-- <div class="form_box dis_flex">
          <div class="form_txt">讲座发布时间：</div>
          <div class="form_info dis_flex">
            <div class="courseware_txt">使用课件PPT：</div>
            <div class="courseware_btn">查看课件</div>
          </div>
        </div> -->
        <div class="form_box dis_flex">
          <div class="form_txt">讲座发布时间：</div>
          <div class="form_info">{{ convertTimestampToDateTime(info.time) }}
          </div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">活动当前阶段：</div>
          <div class="form_info">{{ getStatus(info.status) }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">目标招募人数：</div>
          <div class="form_info">{{ info.max_participation }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">发布人员：</div>
          <div class="form_info">{{ info.user_name }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">发布人身份：</div>
          <div class="form_info">{{ info.role_name }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">活动举行地点：</div>
          <div class="form_info">{{ info.address }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">活动当前阶段：</div>
          <div class="form_info">{{ getStatus(info.status) }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">培训讲座类型：</div>
          <div class="form_info">{{ info.type_name }}</div>
        </div>

        <div class="form_box dis_flex">
          <div class="form_txt">发布人员：</div>
          <div class="form_info">{{ info.user_name }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">发布人身份：</div>
          <div class="form_info">{{ info.role_name }}</div>
        </div>
        <div class="form_box dis_flex">
          <div class="form_txt">活动举行地点：</div>
          <div class="form_info">{{ info.address }}</div>
        </div>
      </div>
      <!-- 培训讲师介绍 -->
      <div class="" v-if="false">
        <div class="head_label">
          <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
          <div class="label_txt">培训讲师介绍</div>
        </div>
        <div class="lecturer_box white_box">
          <div class="dis_flex">
            <img :src="info.lecturer_photo" alt="" class="lecturer_img" />
            <div>
              <div>
                <span>{{ info.lecturer_name }}</span>
                <span>{{ info.lecturer_sex }}</span>
                <span>{{ info.lecturer_age }}</span>
              </div>
              <div>标签：</div>
              <div>{{ info.lecturer_label }}</div>
            </div>
            <!-- <div>
              <div class="lecturer_info dis_flex">
                <div class="lecturer_name">贺仁心</div>
                <img
                  src="@/assets/images/common/man.png"
                  alt=""
                  class="gender_icon"
                />
                <div class="lecturer_age">26岁</div>
              </div>
              <div class="lecturer_lable">标签：</div>
              <div class="lecturer_lable">
                IPA国际认证资国际国际认证资国际认认证资v国
              </div>
            </div> -->
          </div>
          <div class="division_line"></div>
          <div class="lecturer_introduce">
            简介：{{ info.lecturer_introduce }}
          </div>
        </div>
      </div>
      <!-- 活动内容详情 -->
      <div>
        <div class="head_label">
          <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
          <div class="label_txt">活动内容详情</div>
        </div>
        <div class="activity_cont white_box">
          <div class="activity_det_tit">一、活动对象说明</div>
          <div class="activity_det_txt">
            本次活动的目标参与人数为：{{ info.max_participation }}人。活动开放对象为：{{info.taskDepartment?.map(item =>
              item.department_name).join('、')}}，望大家积极报名参与。
          </div>
          <div class="activity_det_tit">二、培训讲座简介：</div>
          <div class="activity_det_txt"> {{ info.describe }}
          </div>
          <div class="activity_det_tit">三、前置测评任务：</div>
          <div class="activity_det_txt evaluation_txt">
            本次活动开展前，请完成以下测评任务：
          </div>
          <div class="evaluation_box">
            <div class="item_evaluation" v-for="(item, index) in info.taskRatingScale" :key="index">
              <div class="dis_flex">
                <img :src="item.rating_scale_cover" alt="" class="evaluation_img" />
                <div class="dis_flex just_space_between flex1">
                  <div class="item_right">
                    <div class="evaluation_tit">{{ item.rating_scale_name }}</div>
                    <div class="state_show dis_flex">
                      <img src="@/assets/images/common/success_icon.png" alt="" class="evaluation_state_img"
                        v-if="item.result_id > 0" />
                      <img src="@/assets/images/common/fail_icon.png" alt="" class="evaluation_state_img" v-else />
                      <div class="evaluation_state">{{ info.result_id > 0 ? '任务未完成' : '任务已完成' }}。</div>
                    </div>
                  </div>

                  <div class="evaluation_btn" @click="toEvaluation(item)">{{ item.result_id > 0 ? '查看报告' : '开始测评' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 活动时间安排 -->
      <div>
        <div class="head_label">
          <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
          <div class="label_txt">活动时间安排</div>
        </div>
        <div class="time_box white_box">
          <!-- 报名阶段 -->

          <div class="item_arrange">
            <div class="stage_label stage_01">
              ▶ 报名阶段
            </div>
            <div class="activity_txt">起止时间：</div>
            <div class="dis_flex item_info">
              <div class="activity_time">{{ convertTimestampToDateTime(info.enroll_start_time) }}</div>
              <div class="time_division">--</div>
              <div class="activity_time">{{ convertTimestampToDateTime(info.enroll_end_time) }}</div>

            </div>
            <div class="audit_txt">(报名后需等待审核)</div>
            <div class="tips_info">
              <div class="tips_tit">注意事项：</div>
              <div class="tips_txt">{{ info.enroll_matters }}</div>
            </div>
          </div>
          <div class="item_arrange">
            <div class="stage_label stage_02">
              ▶ 签到阶段
            </div>
            <div class="activity_txt">起止时间：</div>
            <div class="dis_flex item_info">
              <div class="activity_time">{{ convertTimestampToDateTime(info.sign_start_time) }}</div>
              <div class="time_division">--</div>
              <div class="activity_time">{{ convertTimestampToDateTime(info.sign_end_time) }}</div>
            </div>
            <div class="tips_info">
              <div class="tips_tit">注意事项：</div>
              <div class="tips_txt">{{ info.sign_matters }}</div>
            </div>
          </div>
          <div class="item_arrange">
            <div class="stage_label stage_03">
              ▶ 实施阶段
            </div>
            <div class="activity_txt">起止时间：</div>
            <div class="dis_flex item_info">
              <div class="activity_time">{{ convertTimestampToDateTime(info.start_time) }}
              </div>
              <div class="time_division">--</div>
              <div class="activity_time">{{ convertTimestampToDateTime(info.end_time) }}</div>
            </div>
          </div>
        </div>
        <div class="">
          <div class="head_label">
            <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
            <div class="label_txt">具体实施方案</div>
          </div>
          <div class="white_box plan_txt">
            <div>{{ info.scheme }}
            </div>
            <div> {{ info.introduce }}</div>
          </div>

        </div>
      </div>

      <!-- 暂无数据 -->
      <div class="no_data_txt">- 暂无更多内容了 -</div>
    </div>

    <!-- 底部 -->
    <div class="footer_box dis_flex">
      <div class="footer_txt">
        <div>当前阶段：报名进行中</div>
        <div class="progress_txt">报名情况：{{ info.enroll_num }}/{{ info.max_participation }}</div>
      </div>
      <div class="footer_btn" @click="toSignUp">确定报名
      </div>
    </div>

    <!-- 报名成功弹窗 -->
    <van-popup v-model="successPop" round position="center">
      <div class="pop_box dis_flex just_center">
        <img src="@/assets/images/common/success_icon.png" alt="" class="pop_tips_img" />
        <div class="pop_tips_txt">培训讲座报名成功！</div>
      </div>
    </van-popup>
    <!-- 报名失败弹窗 -->
    <van-popup v-model="errorPop" round position="center">
      <div class="pop_box dis_flex just_center">
        <img src="@/assets/images/common/error_icon.png" alt="" class="pop_tips_img" />
        <div class="pop_tips_txt">培训讲座报名失败！</div>
      </div>
    </van-popup>
    <!-- <lightHintPop :isShowPop='isShowPop' :tipsInfo='tipsInfo' /> -->
  </div>
</template>

<script>
import { submitSignup, queryGroupActivityDetails } from '@/api/funcation/groupActivity'
import lightHintPop from '@/components/lightHintPop'
import { convertTimestampToDateTime } from "@/utils/time";
export default {
  data() {
    return {
      taskId: '',
      info: {},
      successPop: false,
      errorPop: false,
      isShowPop: true,
      tipsInfo: {
        type: 'success',
        txt: '培训讲座报名成功！'
      },
      validResultIds: []
    };
  },
  created() {
    this.taskId = this.$route.query.id
    this.getGroupActivityDetails()
  },
  computed: {
    getStatus() {
      return (ss) => {
        if (ss == 1) return "未开始";
        if (ss == 2) return "报名阶段";
        if (ss == 3) return "签到阶段";
        if (ss == 4) return "实施阶段";
        if (ss == 5) return "已结束";
      };
    },
  },
  components: { lightHintPop },
  methods: {
    convertTimestampToDateTime,
    //报名
    async toSignUp() {
      let validResultIds = this.info.taskRatingScale.filter(result_id => result_id > 0)
      let par = {
        id: this.info.id,
        result_id: validResultIds
      }
      let { data } = await submitSignup(par)
      if (data.code == 200) {
        this.$router.push('/groupActivity')
      }
    },

    async getGroupActivityDetails(id) {
      let { data } = await queryGroupActivityDetails({ id: this.taskId })
      this.info = data
      if (Array.isArray(this.info.askRatingScale)) {
        this.validResultIds = this.info.askRatingScale.filter(item => item.result_id > 0).map(item => item.result_id)
      }
    },
    toEvaluation(item) {
      if (item.result_id > 0) {
        this.$router.push(`/activityReport?resultId=${item.result_id}`)
        // 
      } else {
        this.$router.push(`/normalAnswer?id=${item.rating_scale_id}&type=groupActivity&taskId=${this.taskId}`);
      }
    }
  }
};
</script>


<style lang="less" scoped>
.white_box {
  background: #ffffff;
  border-radius: 6.67px;
}

.dis_flex {
  display: flex;
  align-items: center;
}

.just_center {
  justify-content: center;
}

.just_space_between {
  justify-content: space-between;
}

.flex1 {
  flex: 1;
}

//标签
.head_label {
  display: flex;
  align-items: center;
  margin: 19px 0;
}

.label_img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}

.label_txt {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}

.details_page {
  background-color: #f4f6fa;
  color: #333333;
}

.details_cont {
  padding: 10px 10px 60px 10px;
}

.training_info {
  padding: 10px 10px 0 10px;
}

.theme_txt {
  font-size: 16.67px;
  font-weight: bold;
  line-height: 25px;
}

.theme_img {
  width: 320px;
  height: 180px;
  margin-top: 16.33px;
}

.form_box {
  font-size: 14px;
  line-height: 14px;
  padding: 14px 0;
  border-bottom: 0.33px solid #dddddd;

  &:last-child {
    border: 0;
  }
}

.form_txt {
  color: #333333;
  min-width: 120px;
}

.form_info {
  line-height: 20px;
  color: #777777;
}

.courseware_txt {
  color: #0090ff;
  font-size: 14px;
  text-decoration: underline;
}

.courseware_btn {
  width: 66.67px;
  height: 28.67px;
  line-height: 28.67px;
  text-align: center;
  border-radius: 5.33px;
  color: #ffffff;
  font-size: 12.67px;
  margin-left: 14.67px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
}

.lecturer_info {
  margin-bottom: 10px;
}

.lecturer_name {
  font-weight: bold;
  font-size: 16.67px;
}

.lecturer_box {
  padding: 20px 10px 14px 10px;
}

.division_line {
  border-bottom: 0.33px solid #dddddd;
  margin: 16px 0;
}

.lecturer_introduce {
  line-height: 28px;
  font-size: 14px;
}

.lecturer_img {
  width: 63.33px;
  height: 63.33px;
  border-radius: 8px;
  margin-right: 10.33px;
  background: red;
}

.gender_icon {
  width: 16.67px;
  height: 16.67px;
  margin: 0 9px;
}

.lecturer_age {
  font-size: 14.67px;
}

.lecturer_lable {
  font-size: 14px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 85%;
}

.activity_txt {
  font-size: 14.67px;
  line-height: 14.67px;
  margin-bottom: 13px;
}

.activity_cont {
  padding: 20px 10px;
}

.activity_det_tit {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}

.activity_det_txt {
  font-size: 14px;
  color: #555555;
  line-height: 29.33px;
  text-indent: 2em;
  margin: 19px 0;
}

.evaluation_txt {
  text-indent: 0;
}

.time_box {
  padding: 18px 10px;
}

.activity_time {
  width: 150.33px;
  height: 33.33px;
  line-height: 33.33px;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
    #ffffff;
  border: 0.33px solid #999999;
  border-radius: 6.67px;
  font-size: 13.33px;
  text-align: center;
}

.time_division {
  font-size: 14px;
  color: #000000;
  margin: 0 4px;
}

.activity_desc {
  color: #777777;
  font-size: 14px;
}

.item_arrange {
  margin-bottom: 24px;

  &:last-child {
    margin: 0;
  }
}

.stage_label {
  width: 320px;
  height: 33.33px;
  border-radius: 4.67px;
  color: #ffffff;
  font-size: 14.67px;
  line-height: 33.33px;
  padding-left: 8px;
}

.stage_01 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #ff9500;
}

.stage_02 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #29cca6;
}

.stage_03 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #2e8ae6;
}

.activity_txt {
  color: #333333;
  font-size: 14px;
  margin-top: 15.67px;
}

.item_info {
  margin-top: 13px;
}

.time_box {
  padding: 18px 10px;
}

.audit_txt {
  font-size: 14px;
  color: #ff9500;
  margin-top: 12.33px;
}

.tips_info {
  margin-top: 22.67px;
  font-size: 14px;
}

.tips_tit {
  margin-bottom: 18px;
  color: #333333;

}

.tips_txt {
  color: #555555;
  line-height: 28px;
}

.plan_txt {
  padding: 24px 10px;
  color: #555555;
  font-size: 14px;
  line-height: 28px;
}

.no_data_txt {
  font-size: 10.67px;
  color: #555555;
  text-align: center;
  margin: 33px 0;
}

.footer_box {
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  background: #fff;
}

.footer_txt {
  font-size: 14px;
  line-height: 14px;
  padding-left: 20px;
}

.progress_txt {
  color: #ff9500;
  margin-top: 9.67px;
}

.footer_btn {
  width: 103.33px;
  height: 59.67px;
  line-height: 59.67px;
  text-align: center;
  color: #ffffff;
  font-size: 15.33px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
}

.item_evaluation {
  border-bottom: 0.67px solid #dddddd;
  padding: 16px 0;

  &:last-child {
    border: 0;
  }
}

.evaluation_img {
  width: 40px;
  height: 40.67px;
  border-radius: 6px;
  margin-right: 9.33px;
}

.item_right {
  width: 60%;
}

.evaluation_tit {
  width: 100%;
  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
  font-size: 14px;
  line-height: 14px;
}

.state_show {
  margin-top: 7px;
}

.evaluation_state_img {
  width: 15.33px;
  height: 15.33px;
}

.evaluation_state {
  color: #000000;
  font-size: 12px;
  line-height: 12px;
  margin-left: 6px;
}

.evaluation_btn {
  width: 80px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 6.67px;
  color: #ffffff;
  font-size: 12.67px;
  flex-shrink: 1;
}

.pop_box {
  width: 215px;
  height: 53.33px;
  line-height: 53.33px;
}

.pop_tips_img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.pop_tips_txt {
  font-size: 16.67px;
  color: #ffffff;
}

::v-deep.van-popup--center.van-popup--round {
  border-radius: 26.67px;
  background: #000000;
  opacity: 0.8;
}
</style>